<template>
  <div class="digitalFlop">
    <!--预览区-->
    <div class="previewStyle">
      <!-- 一行二个 -->
      <div v-show="formData.indicator == 1" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-one" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '150px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
            </div>
            <div v-else>{{ item.name }}</div>
            <svg v-if="item.showBox" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" :height="formData.height + 'px'" class="digital-flop-wrapper">
              <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
            </svg>
          </div>
        </div>
      </div>
      <!-- 一行三个 -->
      <div v-show="formData.indicator == 2" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-two" :style="formData !== 0?{height: formData.height + 'px'}:{height: '105px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 一行四个 -->
      <div v-show="formData.indicator == 3" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-three" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '85px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 二左二右 -->
      <div v-show="formData.indicator == 4" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-four" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',padding: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一左二右 -->
      <div v-show="formData.indicator == 5" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',padding: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一上二下 -->
      <div v-show="formData.indicator == 6" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five imgLayout-six" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一左三右 -->
      <div v-show="formData.indicator == 7" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five imgLayout-seven" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
              <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
              </div>
              <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                  {{item.digital.default}}
                </span>
                <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
              </div>
              <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
              </svg>
            </div>
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>

    </div>
    <!--编辑区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">数字标签</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator" @change="radioChange">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="settingActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="styleWrap">
                <div class="titleStyle">标签布局</div>
                <div class="contentStyle">
                  <!-- 一行二个 -->
                  <div v-show="formData.indicator == 1">
                    <div class="imgLayout layout-cont imgLayout-one imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '150px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一行三个 -->
                  <div v-show="formData.indicator == 2">
                    <div class="imgLayout layout-cont imgLayout-two imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '105px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一行四个 -->
                  <div v-show="formData.indicator == 3">
                    <div class="imgLayout layout-cont imgLayout-three imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '85px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 二左二右 -->
                  <div v-show="formData.indicator == 4">
                    <div class="imgLayout layout-cont imgLayout-four imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一左二右 -->
                  <div v-show="formData.indicator == 5">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一上二下 -->
                  <div v-show="formData.indicator == 6">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-six imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一左三右 -->
                  <div v-show="formData.indicator == 7">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-seven imgLayout-border" :style="formData.height !== 0?{height: formData.height + 'px'}:{height: '300px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <div v-if="item.id" class="digital-flop-wrapper" :style="{background: item.bgcolor, opacity: item.opacity,}">
                          <div class="digital-title-box" :style="{paddingTop: item.title.marginTop/2  + 'px'}">
                            <span class="digital-title" :style="{fontSize: item.title.size/2  + 'px', color: item.title.color, fontWeight: item.title.weight,}">{{item.title.text}}</span>
                          </div>
                          <div class="digital-num-box" :style="{paddingTop: item.flop.gap/2  + 'px'}">
                            <span class="digital-num-prefix" :style="{paddingRight: item.flop.prefix.gap/2  + 'px',fontSize: item.flop.prefix.size/2  + 'px',color: item.flop.prefix.color, fontWeight: item.flop.prefix.weight,}">{{item.flop.prefix.text}}</span>
                            <span class="digital-num" :style="{fontSize: item.digital.size/2  + 'px',color: item.digital.color, fontWeight: item.digital.weight, letterSpacing: item.digital.gap/1000 + 'em',}">
                              {{item.digital.default}}
                            </span>
                            <span class="digital-num-suffix" :style="{paddingLeft: item.flop.suffix.gap/2  + 'px',fontSize: item.flop.suffix.size/2  + 'px',color: item.flop.suffix.color, fontWeight: item.flop.suffix.weight,}">{{item.flop.suffix.text}}</span>
                          </div>
                          <svg v-if="item.showBox" viewBox="0 250 2000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="digital-flop-wrapper">
                            <path v-for="(boxStyleItem,boxStyleIndex) in boxStyleList[item.boxStyle-1].pathList" :d="boxStyleItem" :fill="item.boxcolor"></path>
                          </svg>
                        </div>
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-show="formData.indicator !== 8" class="imgLayout">
                    <div v-for="(layItem, layIndex) in LayoutArr" v-show="active == layIndex" :key="layIndex" class="ad-image-main">
                      <div class="main-content">
                        <div class="main-image">
                          <div class="main-image-add" @click="addImgClick(formData.indicator, layIndex)">
                            <div>添加标签</div>
                          </div>
                        </div>
                        <div class="btn-style">
                          <span>背景颜色：</span>
                          <div style="float: right;">
                            <el-color-picker  size="mini" v-model="layItem.bgcolor"></el-color-picker>
                          </div>
                        </div>
                        <div class="btn-style">
                          <div>背景透明度:</div>
                          <div class="flex_1 dis al_item">
                            <div class="flex_1 progress" style="margin-left: 20px;">
                              <el-slider size="mini"  v-model="layItem.opacity" :step="0.1" :max="1" />
                            </div>
                            <div class="inpWrap">{{ layItem.opacity }}</div>
                          </div>
                        </div>
                        <div class="btn-style">
                          <span>标签样式：</span>
                          <el-radio-group v-model="layItem.style" size="mini" >
                            <el-radio v-for="(styleItem,styleIndex) in 3" :key="styleIndex" :label="styleItem">样式{{ styleItem }}</el-radio>
                          </el-radio-group>
                        </div>
                        <div class="dis al_item w100e item_mar btn-sel-box" style="margin:6px 0 0">
                          <span>显示边框：</span>
                          <el-radio-group v-model="layItem.showBox" size="small">
                            <el-radio-button :label="true">显示</el-radio-button>
                            <el-radio-button :label="false">隐藏</el-radio-button>
                          </el-radio-group>
                        </div>
                        <div v-show="layItem.showBox" class="box-style">
                          <span>边框样式：</span>
                          <el-radio-group v-model="layItem.boxStyle" size="mini" >
                            <el-radio v-for="(boxItem,boxIndex) in 6" :key="boxIndex" :label="boxItem">边框{{ boxItem }}</el-radio>
                          </el-radio-group>
                        </div>
                        <div v-show="layItem.showBox" class="btn-style">
                          <span>边框颜色：</span>
                          <div style="float: right;">
                            <el-color-picker  size="mini" v-model="layItem.boxcolor"></el-color-picker>
                          </div>
                        </div>
                        <div class="flop-style">
                          <el-collapse size="mini" style="width:100%;">
                            <el-collapse-item  size="mini" title="标题" name="1">
                              <div class="main-content">
                                <div class="ad-image-title">
                                  <span>数据标题：</span>
                                  <el-input v-model="layItem.title.text" size="mini" placeholder="输入标题" @change="titleChange(layIndex)" />
                                </div>
                                <div class="progressBox dis al_item dis_ju_spb">
                                  <div>文字大小:</div>
                                  <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                    <div class="flex_1 progress" style="margin-left: 20px;">
                                      <el-slider size="mini"  v-model="layItem.title.size" :max="70" />
                                    </div>
                                    <div class="inpWrap">{{ layItem.title.size }}</div>
                                  </div>
                                </div>
                                <div class="ad-image-title">
                                  <span>文字颜色：</span>
                                  <div style="float: right;">
                                    <el-color-picker  size="mini" v-model="layItem.title.color"></el-color-picker>
                                  </div>
                                </div>
                                <div class="ad-image-title">
                                  <span>文字粗细：</span>
                                  <div style="float: right;">
                                    <el-select  size="mini" v-model="layItem.title.weight" placeholder="请选择">
                                      <el-option label="细" value="lighter"></el-option>
                                      <el-option label="正常" value="normal"></el-option>
                                      <el-option label="粗" value="bold"></el-option>
                                      <el-option label="400" value="400"></el-option>
                                      <el-option label="500" value="500"></el-option>
                                      <el-option label="600" value="600"></el-option>
                                      <el-option label="700" value="700"></el-option>
                                    </el-select>
                                  </div>
                                </div>
                                <div class="box-style">
                                  <span>对齐方式：</span>
                                  <el-radio-group v-model="layItem.title.align" size="mini" >
                                    <el-radio  label="left">居左</el-radio>
                                    <el-radio  label="center">居中</el-radio>
                                    <el-radio  label="right">居右</el-radio>
                                  </el-radio-group>
                                </div>
                                <div class="progressBox dis al_item dis_ju_spb">
                                  <div>位置偏移:</div>
                                  <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                    <div class="flex_1 progress" style="margin-left: 20px;">
                                      <el-slider size="mini"  v-model="layItem.title.marginTop" :max="100" />
                                    </div>
                                    <div class="inpWrap">{{ layItem.title.marginTop }}</div>
                                  </div>
                                </div>
                              </div>
                            </el-collapse-item>
                            <el-collapse-item title="翻牌器" name="2">
                              <div class="main-content">
                                <div class="ad-image-title">
                                  <span>位置：</span>
                                    <el-radio-group v-model="layItem.flop.position" size="mini" >
                                        <el-radio  label="top">居上</el-radio>
                                        <el-radio  label="bottom">居下</el-radio>
                                        <el-radio  label="right">居右</el-radio>
                                    </el-radio-group>
                                 </div>
                                 <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                   <div>与标题间距:</div>
                                   <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                     <div class="flex_1 progress" style="margin-left: 20px;">
                                       <el-slider size="mini"  v-model="layItem.flop.gap" :max="100" />
                                     </div>
                                     <div class="inpWrap">{{ layItem.flop.gap }}</div>
                                   </div>
                                 </div>
                                <div class="ad-image-title">
                                  <span>对齐方式：</span>
                                    <el-radio-group v-model="layItem.flop.align" size="mini" >
                                        <el-radio  label="left">居左</el-radio>
                                        <el-radio  label="c">居中</el-radio>
                                        <el-radio  label="right">居右</el-radio>
                                    </el-radio-group>
                                 </div>
                                 <el-collapse size="mini" >
                                   <el-collapse-item title="前缀" name="1">
                                     <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                       <div>间距:</div>
                                       <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                         <div class="flex_1 progress" style="margin-left: 20px;">
                                           <el-slider size="mini"  v-model="layItem.flop.prefix.gap" :max="100" />
                                         </div>
                                         <div class="inpWrap">{{ layItem.flop.prefix.gap }}</div>
                                       </div>
                                     </div>
                                     <div class="ad-image-title"  style="padding-left: 10px;">
                                       <span>前缀：</span>
                                       <el-input v-model="layItem.flop.prefix.text" size="mini" placeholder="输入文字"/>
                                     </div>
                                     <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                       <div>文字大小:</div>
                                       <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                         <div class="flex_1 progress" style="margin-left: 20px;">
                                           <el-slider size="mini"  v-model="layItem.flop.prefix.size" :max="70" />
                                         </div>
                                         <div class="inpWrap">{{ layItem.flop.prefix.size }}</div>
                                       </div>
                                     </div>
                                     <div class="ad-image-title"  style="padding-left: 10px;">
                                       <span>文字颜色：</span>
                                       <div style="float: right;">
                                         <el-color-picker  size="mini" v-model="layItem.flop.prefix.color"></el-color-picker>
                                       </div>
                                     </div>
                                     <div class="ad-image-title" style="padding-left: 10px;">
                                       <span>文字粗细：</span>
                                       <div style="float: right;">
                                         <el-select  size="mini" v-model="layItem.flop.prefix.weight" placeholder="请选择">
                                           <el-option label="细" value="lighter"></el-option>
                                           <el-option label="正常" value="normal"></el-option>
                                           <el-option label="粗" value="bold"></el-option>
                                           <el-option label="400" value="400"></el-option>
                                           <el-option label="500" value="500"></el-option>
                                           <el-option label="600" value="600"></el-option>
                                           <el-option label="700" value="700"></el-option>
                                         </el-select>
                                       </div>
                                     </div>
                                   </el-collapse-item>
                                   <el-collapse-item title="后缀" name="2">
                                     <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                       <div>间距:</div>
                                       <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                         <div class="flex_1 progress" style="margin-left: 20px;">
                                           <el-slider size="mini"  v-model="layItem.flop.suffix.gap" :max="100" />
                                         </div>
                                         <div class="inpWrap">{{ layItem.flop.suffix.gap }}</div>
                                       </div>
                                     </div>
                                     <div class="ad-image-title"  style="padding-left: 10px;">
                                       <span>后缀：</span>
                                       <el-input v-model="layItem.flop.suffix.text" size="mini" placeholder="输入文字"/>
                                     </div>
                                     <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                       <div>文字大小:</div>
                                       <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                         <div class="flex_1 progress" style="margin-left: 20px;">
                                           <el-slider size="mini"  v-model="layItem.flop.suffix.size" :max="100" />
                                         </div>
                                         <div class="inpWrap">{{ layItem.flop.suffix.size }}</div>
                                       </div>
                                     </div>
                                     <div class="ad-image-title"  style="padding-left: 10px;">
                                       <span>文字颜色：</span>
                                       <div style="float: right;">
                                         <el-color-picker  size="mini" v-model="layItem.flop.suffix.color"></el-color-picker>
                                       </div>
                                     </div>
                                     <div class="ad-image-title" style="padding-left: 10px;">
                                       <span>文字粗细：</span>
                                       <div style="float: right;">
                                         <el-select  size="mini" v-model="layItem.flop.suffix.weight" placeholder="请选择">
                                           <el-option label="细" value="lighter"></el-option>
                                           <el-option label="正常" value="normal"></el-option>
                                           <el-option label="粗" value="bold"></el-option>
                                           <el-option label="400" value="400"></el-option>
                                           <el-option label="500" value="500"></el-option>
                                           <el-option label="600" value="600"></el-option>
                                           <el-option label="700" value="700"></el-option>
                                         </el-select>
                                       </div>
                                     </div>
                                   </el-collapse-item>
                                 </el-collapse>
                              </div>
                            </el-collapse-item>
                            <el-collapse-item title="数字" name="3">
                              <div class="ad-image-title"  style="padding-left: 10px;">
                                <span>默认值：</span>
                                <el-input v-model="layItem.digital.default" size="mini" placeholder="输入文字"/>
                              </div>
                              <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                <div>文字大小:</div>
                                <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                  <div class="flex_1 progress" style="margin-left: 20px;">
                                    <el-slider size="mini"  v-model="layItem.digital.size" :max="100" />
                                  </div>
                                  <div class="inpWrap">{{ layItem.digital.size }}</div>
                                </div>
                              </div>
                              <div class="ad-image-title"  style="padding-left: 10px;">
                                <span>文字颜色：</span>
                                <div style="float: right;">
                                  <el-color-picker  size="mini" v-model="layItem.digital.color"></el-color-picker>
                                </div>
                              </div>
                              <div class="ad-image-title" style="padding-left: 10px;">
                                <span>文字粗细：</span>
                                <div style="float: right;">
                                  <el-select  size="mini" v-model="layItem.digital.weight" placeholder="请选择">
                                    <el-option label="细" value="lighter"></el-option>
                                    <el-option label="正常" value="normal"></el-option>
                                    <el-option label="粗" value="bold"></el-option>
                                    <el-option label="400" value="400"></el-option>
                                    <el-option label="500" value="500"></el-option>
                                    <el-option label="600" value="600"></el-option>
                                    <el-option label="700" value="700"></el-option>
                                  </el-select>
                                </div>
                              </div>
                              <div class="progressBox dis al_item dis_ju_spb"  style="padding-left: 10px;">
                                <div>数字间隔:</div>
                                <div class="flex_1 dis al_item dis_ju_end progressWrap">
                                  <div class="flex_1 progress" style="margin-left: 20px;">
                                    <el-slider size="mini"  v-model="layItem.digital.gap" :min="-100" :max="100" />
                                  </div>
                                  <div class="inpWrap">{{ layItem.digital.gap }}</div>
                                </div>
                              </div>
                              <div class="ad-image-title"  style="padding-left: 10px;">
                                <span>小数位数：</span>
                                <el-input-number size="mini" v-model="layItem.digital.decimal" controls-position="right" :min="1" :max="4" @change="changeDigitalFixed()"></el-input-number>
                              </div>
                              <div class="dis al_item w100e item_mar btn-sel-box" >
                                <span>显示千分位：</span>
                                <el-radio-group v-model="layItem.digital.showComma" size="small">
                                  <el-radio-button :label="true">显示</el-radio-button>
                                  <el-radio-button :label="false">隐藏</el-radio-button>
                                </el-radio-group>
                              </div>
                              <div class="dis al_item w100e item_mar btn-sel-box" >
                                <span>开启动画：</span>
                                <el-radio-group v-model="layItem.digital.showAnimation" size="small">
                                  <el-radio-button :label="true">开</el-radio-button>
                                  <el-radio-button :label="false">关</el-radio-button>
                                </el-radio-group>
                              </div>
                              <div class="ad-image-title"  style="padding-left: 10px;">
                                <span>动画时长：</span>
                                <el-input-number size="mini" v-model="layItem.digital.timelength" controls-position="right" :min="100" :step="100" :max="2000"></el-input-number>
                              </div>
                            </el-collapse-item>
                          </el-collapse>
                        </div>
                        <div class="ad-image-title">
                          <span>跳转路径：</span>
                          <div v-if="layItem.type >= 0&&layItem.microType&&layItem.microTitle" class="dis al_item">
                            <span class="typeName">{{ layItem.microType }}</span>
                            <span class="microTitle">{{ layItem.microTitle }}</span>
                            <span class="cursor modifyBtn microTitle" @click="choosePageClick(layIndex,1)">修改</span>
                          </div>
                          <div v-else class="cursor modifyBtn" @click="choosePageClick(layIndex,1)">请选择跳转到的页面</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>边角样式</div>
                    <el-radio-group v-model="formData.cornerBorder" size="small">
                      <el-radio-button label="0">直角</el-radio-button>
                      <el-radio-button label="30">圆角</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>标签间距</div>
                    <el-radio-group v-model="formData.imageMargin" size="small">
                      <el-radio-button :label="0">无</el-radio-button>
                      <el-radio-button :label="10">有</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.pageMargin }}px</span>
                  </div>
                  <el-radio-group v-model="formData.pageMargin" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spbz">
                  <div>框体高度</div>
                  <div class="flex_1 dis al_item dis_ju_end ">
                    <div class="flex_1 progress" style="margin-left: 20px;">
                      <el-slider v-model="formData.height" :max="200" />
                    </div>
                    <div class="inpWrap" style="margin-left: 10px;">{{ formData.height }}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog custom-class="up-dialog" :close-on-click-modal="false" top="5vh" title="已上架商品" :visible.sync="dialogChooseGoods" width="70%">
      <div class="dialog-content">
        <chooseGoods :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--选择微页面-->
    <div id="dialog">
      <el-dialog custom-class="up-dialog" :close-on-click-modal="false" :modal="false" top="5vh" title="页面选择" :visible.sync="dialogChoosePages" width="55%">
        <choose-feature :is-get-choose-data="isGetChooseFeature" @chooseChooseFeaturesFun="chooseChooseFeaturesFun" />
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
